<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>视频管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加视频</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form label-width="80px" :model="videoForm" :rules="addVideoRules" ref="addVideoRef">
      <el-row>
        <el-col :span="7">
          <el-form-item label="标题" prop="video_title">
            <el-input
              prefix-icon="el-icon-user-solid"
              placeholder="请输入标题"
              v-model="videoForm.video_title"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label="分类" prop="category">
            <el-select v-model="videoForm.category" placeholder="请选择">
              <el-option
                v-for="item in categories"
                :key="item.id"
                :label="item.cate"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label="视频" prop="video">
            <div slot="tip" class="el-upload__tip" style="color:red">只能上传视频文件，且不超过一个</div>
            <el-upload
              class="avatar-uploader"
              :action="baseUrl + 'upload/video'"
              :show-file-list="false"
              name="video"
              :http-request="handleUpload"
              :on-change="changeData"
            >
              <video v-if="videoForm.video" :src="videoForm.video" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-progress
              :text-inside="true"
              :stroke-width="24"
              :percentage="progressPercent"
              status="success"
            ></el-progress>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label="COS">
            <div style="color:red">
              请上传到COS服务器进行视频加速
              <span style="color:grey">(服务器带宽原因已禁用该功能)</span>
            </div>
            <div v-if="isCos" style="color:green;font-weight:800">
              <i class="el-icon-check" />上传成功
            </div>
            <div v-else style="color:orange;font-weight:800">
              <i class="el-icon-close" />未上传
            </div>
            <el-button type="danger" size="mini" @click="addToCos" disabled>上传到COS</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item>
            <el-button type="primary" size="mini" @click="addVideoForm">添加</el-button>
            <el-button type="warning" size="mini" @click="resetVideoForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>


<script>
import { postVideos, uploadVideos } from "@/api/data";
import config from "@/config";
export default {
  data() {
    return {
      baseUrl:
        process.env.NODE_ENV === "development"
          ? config.baseUrl.dev
          : config.baseUrl.pro,
      progressPercent: 0,
      videoForm: {
        video_title: "",
        category: "",
        video: ""
      },
      isCos: false,
      // 验证规则
      addVideoRules: {
        video_title: [
          { required: true, message: "标题不能为空", trigger: "blur" }
        ],
        category: [
          { required: true, message: "作者不能为空", trigger: "blur" }
        ],
        video: [{ required: true, message: "封面图不能为空", trigger: "blur" }]
      },
      categories: [
        { id: 1, cate: "猫" },
        { id: 2, cate: "游戏" },
        { id: 3, cate: "篮球" },
        { id: 4, cate: "足球" }
      ]
    };
  },
  created() {},
  methods: {
    // 重置表单
    resetVideoForm() {
      this.$refs.addVideoRef.resetFields();
    },
    addVideoForm() {
      // 预校验
      this.$refs.addVideoRef.validate(async valid => {
        if (!valid) return;
        // await this.$http.post("videos", this.videoForm);
        await postVideos(this.videoForm);
        this.$message.success({ message: "添加成功", duration: 1000 });
        this.$router.push("/video/list");
      });
    },
    changeData(file) {
      const size =
        file.size / 1024 / 1024 > 0.1
          ? `(${(file.size / 1024 / 1024).toFixed(1)}M)`
          : `(${(file.size / 1024).toFixed(1)}KB)`;
      file.name.indexOf("M") > -1 || file.name.indexOf("KB") > -1
        ? file.name
        : (file.name += size);
    },
    async handleUpload(data) {
      let formdata = new FormData();
      formdata.append("video", data.file);
      const config = {
        onUploadProgress: progressEvent => {
          this.progressPercent = Number(
            ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2)
          );
        }
      };
      // const res = await this.$http.post("upload/video", formdata, config);
      let res = await uploadVideos(formdata, config);
      this.videoForm.video = res.data.videoPath;
    }
    // async addToCos() {
    //   if (!this.videoForm.video) {
    //     this.$message.error({ message: "请先上传视频" });
    //   } else {
    //     const { data: res } = await this.$http.post("tocos", {
    //       url: this.videoForm.video
    //     });
    //     this.videoForm.video = await res.videoPath;
    //     this.isCos = await true;
    //   }
    // }
  }
};
</script>

<style >
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px !important;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>